<template>
  <div id="SearchTop" :class="['c-search',{'is-top':isTop || fixed}]">
    <form @submit.prevent="$router.push({path:'/searchlist',query:{key:keyWord}}),keyWord='',blurHandle()"
          class="c-search-bd">
      <i class="iconfont icon-fangdajing-copy"></i>
      <input  v-model="keyWord" placeholder="请输入您想要搜索的商品" type="text">
    </form>
  </div>
</template>
<script>
  let searchHeight;
  let tabarHeight = 0, TabbarEl;
  export default {
    name: 'Search',
    props: {
      scrollTop: {
        type: Number,
        default: 0
      },
      fixed: {
        type: Boolean,
        default: false
      },
      selector: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        isTop: false,
        maxTop: 0,
        keyWord: ''
      }
    },
    watch: {
      scrollTop: {
        handler: function (newVal) {
          this.maxTop = newVal;
          newVal && this.bindScroll();
        },
        immediate: true
      }
    },
    mounted() {
      TabbarEl = document.getElementById('Tabbar');
      if (TabbarEl) {
        tabarHeight = TabbarEl.clientHeight;
      }
      setTimeout(() => {
        searchHeight = document.getElementById('SearchTop').clientHeight;
      }, 0)
    },
    beforeDestroy() {
      this.scrollTop && window.removeEventListener('scroll', this.scrollSearch, true)
    },
    methods: {
      bindScroll() {
        this.scrollTop && window.addEventListener('scroll', this.scrollSearch, false)
      },
      focusHandle() {
        this.isTop = true;
        if (!plus) return;
        plus.webview.currentWebview().setStyle({
          softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度
        });
        this.tabBarVisible(false);
      },
      tabBarVisible(visible) {
        TabbarEl.style.height = {true: tabarHeight, false: 0}[visible] + 'px';
      },
      blurHandle() {
        this.scrollSearch();
        if (!plus) return;
        this.tabBarVisible(true);
      },
      scrollSearch(e) {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        this.isTop = scrollTop > this.maxTop;
      }
    }
  }
</script>
<style lang="scss">
  @import "../assets/css/utils";

  .c-search {
    left: 0;
    top: 0;
    z-index: 3;
    position: fixed;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    height: $search-top-height;

    &-bd {
      margin: 0 auto;
      width: 650px;
      height: 64px;
      background-color: #ffffff;
      border-radius: 10px;
      display: flex;
      position: relative;

      input {
        flex: 1;
        width: 0;
        display: flex;
        align-items: center;
        padding-left: 87px;
        font-size: 30px;
        padding-right: 30px;
      }

      .iconfont {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        margin-left: 30px;
        margin-top: 2px;
        font-size: 33px;
      }
    }

    &.is-top {
      background-color: #fc695d;
    }

    @at-root .app-webview {
      height: 170px;
      padding-top: 60px;
    }
  }
</style>
